<template>
	<v-drag-layout
		ref="dragLayout"
		:options="options"
		active-color="#156DFF"
		v-model="form"
		:class="{ enable_service: form.config.enable_service }"
	>
		<div class="flex-column flex-align-center">
			<div class="tips ptb-2">
				点击导航可修改页面信息
			</div>
			<div>
				<el-button type="primary" @click="submit">提交</el-button>
				<el-button @click="reset">重置</el-button>
				<el-button @click="$router.go(-1)">返回列表</el-button>
			</div>
		</div>

		<!-- 左侧 -->
		<template #widget="{ data }"><i :class="data.icon" /> {{ data.name }} </template>
		<!-- 视图 -->
		<template #view="{ data }">
			<component
				:key="data.uid"
				:is="(data.share_type || data.type) + '-view'"
				:view="data"
			/>
		</template>
		<template #ext-view>
			<div class="ext-view">
				<div class="service" v-if="form.config.enable_service">
					客服
				</div>
				<template v-for="view in form.views">
					<div :key="view.uid" v-if="view.type == 'service'" class="service">
						service {{ view.uid }}
					</div>
				</template>
			</div>
		</template>
		<!-- 配置 -->
		<template #conf="{ data }">
			<h4 class="conf-title">配置：{{ data.name }}</h4>
			<div class="conf-content">
				<component
					:key="data.uid"
					:is="(data.share_type || data.type) + '-edit'"
					v-bind="widgetProps(data)"
				/>
			</div>
		</template>
		<template #page>
			<div class="conf-content">
				<page-info
					:config.sync="form.config"
					:adMpList="adMpList"
					:saving="saving"
					@change-biz="getAdMpList"
				/>
			</div>
		</template>
	</v-drag-layout>
</template>
<script>
import VDragLayout from "v-drag-layout";
import "v-drag-layout/dist/style.css";
import qs from "qs";
import { uuid } from "@/utils";
import PageInfo from "../components/edit/page-info";

import ImageView from "../components/view/image";
import ImageEdit from "../components/edit/image";
// 文章

import ArticleView from "../components/view/article";
import ArticleEdit from "../components/edit/article";
// 商城
import ShopView from "../components/view/shop";
import ShopEdit from "../components/edit/shop";
// 拼团
import GroupBuyView from "../components/view/group-buy";
import GroupBuyEdit from "../components/edit/group-buy";

import MyOrderView from "../components/view/my-order";
import MyOrderEdit from "../components/edit/my-order";
import WechatView from "../components/view/wechat";
import WechatEdit from "../components/edit/wechat";
import DynamicQrcodeView from "../components/view/dynamic-qrcode";
import DynamicQrcodeEdit from "../components/edit/dynamic-qrcode";

// 审核表单
import CheckFormView from "../components/view/check-form";
import CheckFormEdit from "../components/edit/check-form";

import { tplData, tplDataMap, defaultTplConf } from "./tpl_data";

const defaultConfig = { ...defaultTplConf };

export default {
	name: "AdEditor",
	components: {
		VDragLayout,
		PageInfo,
		// 图片
		ImageView,
		ImageEdit,
		// 文章
		ArticleView,
		ArticleEdit,
		// 评论
		// CommentView: () => component("view/comment"),
		// CommentEdit: () => component("edit/comment"),
		// 加微
		// ServiceView: () => component("view/service"),
		// ServiceEdit: () => component("edit/service"),
		// 商城
		ShopView,
		ShopEdit,
		// 拼团
		GroupBuyView,
		GroupBuyEdit,
		//我的订单
		MyOrderView,
		MyOrderEdit,
		// 微信关注
		WechatView,
		WechatEdit,
		// 动态二维码
		DynamicQrcodeView,
		DynamicQrcodeEdit,
		// 审核表单
		CheckFormView,
		CheckFormEdit
	},
	data() {
		return {
			saving: false,
			form: {
				views: [],
				config: { ...defaultConfig }
			},
			backForm: {
				id: undefined,
				views: [],
				config: { ...defaultConfig }
			},
			options: Object.freeze(tplData),
			select: {},
			editing: false,
			// 小程序列表
			adMpList: [],
			isInit: true
		};
	},
	created() {
		defaultConfig.biz_id = this.getCurrBiz();
		this.form.config.biz_id = defaultConfig.biz_id;
		this.backForm.config.biz_id = defaultConfig.biz_id;
		const { query } = this.$route;
		this.editing = !!query.id;
		if (!this.editing) {
			this.isInit = false;
			this.getAdMpList();

			return;
		}
		this.getInfo();
	},
	methods: {
		async getInfo() {
			const { query } = this.$route;
			const res = await this.$service.ad
				.templateInfo({ id: query.id })
				.catch(() => undefined);
			let info = res ?? query;
			if (!info.tpl_data) {
				this.backForm = {
					config: {
						...defaultConfig,
						...info,
						backgroundColor: info.bg_color,
						biz_id: info.biz_id * 1,
						bra_id: info.bra_id == 0 ? "" : info.bra_id * 1,
						code_ids: info.code_ids
							?.split(",")
							.filter(Boolean)
							.map(Number),
						copy_type: info.copy_type * 1,
						enable_form: info.enable_form * 1,
						enable_service: info.enable_service * 1,
						enable_location_wechat: info.enable_location_wechat * 1,
						form_pay: info.form_pay * 1,
						form_type: info.form_type * 1,
						is_payment: info.is_payment * 1,
						modal_show: info.modal_show * 1,
						mul_city: info.mul_city * 1,
						wechat_tip_show: info.wechat_tip_show * 1
					},
					views: [
						{
							type: "article",
							name: "文章",
							icon: "el-icon-tickets",
							uid: uuid(),
							options: {
								padding_lr: 0,
								padding_tb: 0,
								content: info.content
							}
						},
						{
							type: "article",
							name: "文章",
							icon: "el-icon-tickets",
							uid: uuid(),
							options: {
								padding_lr: 0,
								padding_tb: 0,
								content: info.content2
							}
						}
					]
				};
				if (info.enable_form == 1) {
					this.backForm.views.push({
						type: info.form_type == 1 ? "shop" : "group-buy",
						share_type: info.form_type == 1 ? "shop" : "group-buy",
						name: info.form_type == 1 ? "商城" : "拼团",
						icon: info.form_type == 1 ? "el-icon-goods" : "el-icon-money",
						uid: uuid(),
						options: {
							fixed: true,
							fixed_height: info.form_type == 1 ? 1.7332 : 2.2888,
							city_data: info.city_data?.split(",").filter(Boolean),
							is_payment: info.is_payment * 1,
							form_pay: info.form_pay * 1,
							original_cost: Number(info.original_cost),
							pay_money: Number(info.pay_money || 0),
							discount_money: Number(info.discount_money || 0)
						}
					});
				}
			} else {
				this.backForm = JSON.parse(info.tpl_data);
			}
			if (!this.backForm.config.discount_money) {
				this.backForm.config.discount_money = 0;
			}
			this.backForm.id = info.id;
			let formType = ["shop", "group-buy"];
			this.backForm.views.forEach(v => {
				if (v.type.includes("group-buy")) {
					this.$set(v, "share_type", "group-buy");
					this.$set(v.options, "discount_money", v.options.discount_money || 0);
				}
				if (v.type.includes("shop")) {
					this.$set(v, "share_type", "shop");
				}
				if (formType.includes(v.share_type)) {
					this.$set(
						v.options,
						"fields",
						v?.options?.fields || tplDataMap[v.type].options.fields
					);
				}
			});
			this.form = JSON.parse(JSON.stringify(this.backForm));
			await this.getAdMpList();
			this.isInit = false;
		},

		reset() {
			this.$refs.dragLayout.setSelect();
			this.form = JSON.parse(JSON.stringify(this.backForm));
		},
		async getAdMpList() {
			const { biz_id } = this.form.config;
			if (!this.isInit) {
				this.form.views.forEach(v => {
					if (v.type.includes("wechat")) {
						this.$set(v.options, "skip_mp_id", "");
					}
				});
			}
			this.adMpList = [];
			if (!biz_id) return;
			let list = await this.$service.ad.adMini({ biz_id });
			this.adMpList = list || [];
		},
		widgetProps(view) {
			const { config } = this.form;
			let props = {
				view,
				config,
				saving: this.saving
			};
			if (view.type == "wechat") {
				props.adMpList = this.adMpList;
			}
			return props;
		},
		async submit() {
			const { config } = this.form;
			const { id } = this.backForm;

			this.saving = true;
			let form = {
				id,
				...config,
				bg_color: config.backgroundColor,
				code_ids: config.code_ids.join(),
				tpl_data: JSON.stringify(this.form)
			};
			await this.$service.ad[this.editing ? "templateEdit" : "templateAdd"](
				qs.stringify(form)
			).done(() => {
				this.saving = false;
			});
			this.$message.success("操作成功");
			this.$router.replace("/home/wide/mould/mouldList");
		}
	}
};
</script>
<style lang="scss" scoped>
.conf-title {
	padding: 0 10px 10px;
	box-sizing: border-box;
}
.conf-content {
	flex: 1;
	overflow: auto;
}

::v-deep {
	.drag-layout__right {
		width: 500px;
		display: flex;
		flex-direction: column;
	}
	.widget-views {
		box-sizing: border-box;
		overflow: overlay;
		&::-webkit-scrollbar {
			width: 0 !important;
		}
	}
	.view-empty {
		background: #ffffff;
		height: 100px;
		font-size: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #c1c1c1;
		width: 100%;
	}
	img {
		width: 100%;
		// height: 100%;
		vertical-align: middle;
	}
	.tips {
		color: #aaa;
		font-size: 12px;
	}
}
.enable_service {
	::v-deep .widget-views {
		padding-bottom: 50px;
	}
}
.ext-view {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 10;
	.service {
		height: 50px;
		line-height: 50px;
		text-align: center;
		background-color: #fff;
		color: #aaa;
		font-size: 14px;
	}
}
</style>
